<template>
    <TopNav />
    <div class="main_wrap" style="background-color: #fff;padding-top: 10px">
        <div class="quick_pay_set">
            <div class="title">
                快捷金额
            </div>
            <div class="grid">
                <div class="item" v-for="(item, index) in quickPayList" :key="index">
                    <span>快捷金额{{ index + 1 }}：</span>
                    <MyInput @click="showCountKeyboard(index)" placeholder="请输入金额" :innerText="item" class="item" />
                </div>
            </div>

        </div>
        <el-divider border-style="dashed" />
        <div class="print_set">
            <div class="title">
                小票打印机设置
            </div>
            <div class="row">
                <div class="item">
                    <span>左边距：</span>
                    <MyInput @click="handleClickPaperMargin(0)" placeholder="请输入金额" :innerText="leftPadding" />
                    <div class="info"><span style="color:black">个字符</span></div>
                </div>
                <div class="item">
                    <span>右边距：</span>
                    <MyInput @click="handleClickPaperMargin(1)" placeholder="请输入金额" :innerText="rightPadding" />
                    <div class="info"><span style="color:black">个字符</span></div>

                </div>
            </div>

        </div>

        <el-divider border-style="dashed" />
        <div class="print_set">
            <div class="title">
                称类型设置
            </div>
            <div class="row">
                <el-radio-group v-model="currentScaleType" @change="changeScaleType">
                    <el-radio value="1" size="large">寺冈</el-radio>
                    <el-radio value="2" size="large">托利多freshway</el-radio>
                    <el-radio value="3" size="large">托利多freshstar</el-radio>
                </el-radio-group>

            </div>

        </div>

        <!--快捷金额数字键盘-->
        <CountKeyboard class="quick_pay_keyboard" v-model="isShowCountKeyboard"
            keyboardContainerClass="systemconfig_keyboard_class" @onConfirm="onConfirm"
            :title="`快捷金额${currentQuickPayIndex + 1}`" placeholder="请输入金额" />

        <!--纸张边距数字键盘-->
        <CountKeyboard class="paper_keyboard" v-model="isShowPaperKeyboard"
            keyboardContainerClass="systemconfig_paper_keyboard_class" @onConfirm="onConfirmPaper" title="请输入"
            placeholder="请输入" />

    </div>



</template>

<script setup lang="ts">
import CountKeyboard from '@renderer/components/CountKeyboard.vue'
import { useUserStore } from '@renderer/store/user'

import { storeToRefs } from 'pinia'
import { ref, watch } from 'vue'
const userStore = useUserStore()

const { quickPayList, leftPadding, rightPadding,currentScaleType } = storeToRefs(userStore)
const isShowCountKeyboard = ref(false)
const currentQuickPayIndex = ref(0) //当前快捷金额索引
const isShowPaperKeyboard = ref(false)
const currentPaperMarginIndex = ref(0) //当前纸张边距索引

// setQuickPayList
function showCountKeyboard(index) {
    currentQuickPayIndex.value = index
    isShowCountKeyboard.value = true
}


function onConfirm(val) {

    quickPayList.value[currentQuickPayIndex.value] = val
    isShowCountKeyboard.value = false

}

function handleClickPaperMargin(index) { //点击左边距 或右边距
    currentPaperMarginIndex.value = index
    isShowPaperKeyboard.value = true
}

function onConfirmPaper(val) { //确认左右边距
    if (currentPaperMarginIndex.value === 0) {
        userStore.setLeftPadding(val)
    } else {
        userStore.setRightPadding(val)
    }

    isShowPaperKeyboard.value = false
}
//变化时 改变store
watch(() => quickPayList.value, (newVal) => {
    userStore.setQuickPayList(newVal)
}, { deep: true })


//切换称类型
function changeScaleType(val){
    console.log(val)
    userStore.setCurrentScaleType(val)
    window.electron.ipcRenderer.send('set-scale-type',val)
    window.electron.ipcRenderer.send('read-weight')
}
</script>

<style lang="scss" scoped>
.main_wrap {
    .title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
        color: var(--el-text-color-primary);
        position: relative;
        text-indent: 15px;

    }

    .title::before {
        content: '';
        position: absolute;
        left: 0;
        width: 8px;
        height: 100%;
        background-color: var(--el-color-primary);
        border-radius: 4px;
    }

    .quick_pay_set {
        .grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 10px;

            .item {
                display: flex;
                align-items: center;
            }
        }
    }

    .print_set {
        .row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .item {
            display: flex;
            align-items: center;

            .info {
                font-size: 14px;
                color: var(--el-color-info);
                margin-left: 10px;
            }
        }

    }
}
</style>